<template>
  <div class="falut-input">
    <el-dialog v-model="dialogVisible" title="故障上报" width="500" draggable @close="close">
      <div class="fault-row">
        <span>车牌编号</span>
        <el-input v-model="falutId" style="width: 240px" disabled />
      </div>
      <div class="fault-row">
        <span class="reqiured"> 事故类别 </span>
        <el-select  v-model="value" placeholder="Select" style="width: 240px" @change="$forceUpdate">
          <el-option
            v-for="item in faultClass"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="fault-row">
        <span class="reqiured"> 上报备注 </span>
        <el-input v-model="faultNotes" style="width: 360px" />
      </div>
      <div class="fault-row">
        <span> 车辆地点 </span>
        <el-input v-model="falutPosition" style="width: 360px" disabled />
      </div>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleFalut">
          确认
        </el-button>
      </div>
    </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {ElMessage} from 'element-plus'
import {formatDate,getRandomDate} from '@/utils'
import {updateCarById} from '@/api/api'
import {storeToRefs} from 'pinia';
import {usePostStore} from '@/stores'
import axios from "axios";
const postStore = usePostStore();
const {updateRefreshFaultList} = postStore;
const {isRefreshFaultList} = storeToRefs(postStore);
const props = defineProps({
  selectCarOfFault: {
    type: Object,
    reqiured: true,
  },
});
const emits = defineEmits(['close'])
const dialogVisible = ref(true);
//编号
const falutId = ref("");
const value = ref("");
const faultNotes = ref("");
const falutPosition = ref("");
const faultClass = [
  { value: "座包损坏", label: "座包损坏" },
  { value: "龙头损坏", label: "龙头损坏" },
  { value: "车架损坏", label: "车架损坏" },
  { value: "刹车失灵", label: "刹车失灵" },
  { value: "其他原因", label: "其他原因" },
];
onMounted(async () => {
  const coordinates = props.selectCarOfFault.coordinates;
  falutId.value = props.selectCarOfFault.id;
  const url = `/geocoder?location=${coordinates[1]},${coordinates[0]}&key=LL6BZ-ZGM6L-OCDPP-EX7P7-YL2WH-J6BGS`;
  const res = await axios.get(url);
  falutPosition.value = res.data.result.address;
});
const close = ()=>{
    //向弗雷传递一个事件参数
    emits('close');
}
const handleFalut = async()=>{
    if(!value.value || !faultNotes.value){
        ElMessage({
            message:"事故类别或者上报备注不能为空",
            type:"warning",
        })
        return;
    }
    const start = new Date("2022-06-05T00:00:00");
    const end = new Date();
    const faultDate = formatDate(getRandomDate(start,end));
    const data = {
        state:"故障",
        faultContent:value.value,
        faultState:"待处理",
        faultDate:faultDate,
        faultPerson:"xxxxxx",
    }
    const res = await updateCarById(props.selectCarOfFault.id,data);
    console.log(res);
    if(!isRefreshFaultList.value){
      updateRefreshFaultList(true);
    }
    close();
}
</script>

<style scoped>
.fault-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin: 10px 0px;
}
.fault-row span {
  margin-left: 11px;
}
.fault-row .reqiured {
  margin: 0;
}
.fault-row .reqiured::before {
  content: "*";
  color: red;
}
</style>
